<template>
    <view class="letter-container">
        <GZGJHeader title="编辑书信"></GZGJHeader>
        <view class="top-tips-container" v-show="showTopTips">
            <span>编辑书信内容并发送后，由工作人员代笔，通过快递发送给指定人员</span>
            <img :src="topTipsClose" @click="closeTopTips" />
        </view>
        <view class="operation-container">
            <view class="operation-item-container" v-for="(operation, index) in operations" @click="clickOperation(index)">
                <img :src="operation.icon" />
                <text>{{ operation.text }}</text>
            </view>
        </view>
        <view class="letter-body-container">
            <view class="segment-container">
                <view :class="currentTab === 0 ? selectedTabClass : normalTabClass" @click="switchTab(0)">
                    <span>正文</span>
                </view>
                <view :class="currentTab === 1 ? selectedTabClass : normalTabClass" @click="switchTab(1)">
                    <span>收件人</span>
                </view>
                <view :class="currentTab === 2 ? selectedTabClass : normalTabClass" @click="switchTab(2)">
                    <span>信封</span>
                </view>
            </view>
            <letter-content v-show="currentTab === 0" v-model:content="content"></letter-content>
            <letter-receiver
                v-show="currentTab === 1"
                v-model:receiverName="receiver.receiverName"
                v-model:receiverMobile="receiver.receiverMobile"
                v-model:receiverArea="receiver.receiverArea"
                v-model:receiverAddress="receiver.receiverAddress"
            ></letter-receiver>
            <letter-envelope
                v-show="currentTab === 2"
                v-model:receiverName="envelope.receiverName"
                v-model:receiverArea="envelope.receiverArea"
                v-model:receiverAddress="envelope.receiverAddress"
                v-model:senderName="envelope.senderName"
                v-model:senderArea="envelope.senderArea"
                v-model:senderAddress="envelope.senderAddress"
            ></letter-envelope>
        </view>
    </view>
</template>

<script setup>
import GZGJHeader from '@/components/GZGJHeader.vue';
import LetterContent from '@/pages/main/letter/content.vue';
import LetterReceiver from '@/pages/main/letter/receiver.vue';
import LetterEnvelope from '@/pages/main/letter/envelope.vue';
import topTipsClose from '@/static/img/main/letter/top_tips_close.png';
import send from '@/static/img/main/letter/send.png';
import save from '@/static/img/main/letter/save.png';
import reset from '@/static/img/main/letter/reset.png';
import reference from '@/static/img/main/letter/reference.png';
import { onMounted, ref, watch } from 'vue';
const showTopTips = ref(true);
const operations = ref([
    {
        text: '发送',
        icon: send
    },
    {
        text: '保存',
        icon: save
    },
    {
        text: '重置',
        icon: reset
    },
    {
        text: '参考',
        icon: reference
    }
]);
const receiver = ref({
    receiverName: '',
    receiverMobile: '',
    receiverArea: '',
    receiverAddress: ''
});
const envelope = ref({
    receiverName: '',
    receiverArea: '',
    receiverAddress: '',
    senderName: '',
    senderArea: '',
    senderAddress: ''
});
function closeTopTips() {
    showTopTips.value = false;
}
const currentTab = ref(0);
function switchTab(index) {
    currentTab.value = index;
}
const normalTabClass = ref('segment-item-container segment-item-normal');
const selectedTabClass = ref('segment-item-container segment-item-selected');
const content = ref('');
function resetValue() {
    content.value = '';
    receiver.value = {
        receiverName: '',
        receiverMobile: '',
        receiverArea: '',
        receiverAddress: ''
    };
    envelope.value = {
        receiverName: '',
        receiverArea: '',
        receiverAddress: '',
        senderName: '',
        senderArea: '',
        senderAddress: ''
    };
}

function clickOperation(index) {
    if (index === 0) {
    } else if (index === 1) {
    } else if (index === 2) {
        resetValue();
    } else {
    }
}
</script>

<style lang="scss" scoped>
@import '@/static/css/common.scss';
.letter-container {
    @extend .column-container-layout;
    justify-content: flex-start;
    background-color: #f7f7f7;
    .top-tips-container {
        @extend .row-container-layout;
        height: 24px;
        background: rgba(249, 141, 138, 0.15);
        span {
            font-size: 11px;
            color: #e25111;
        }
        img {
            margin: 5px;
        }
    }
    .operation-container {
        @extend .row-layout;
        height: 60px;
        border-top: 1px solid #dbdbdb;
        background-color: white;
        .operation-item-container {
            @extend .column-container-layout;
            justify-content: center;
            flex: 1;
            img {
                width: 16px;
                height: 16px;
            }
            text {
                font-size: 14px;
                color: #666666;
            }
        }
    }
    .letter-body-container {
        @extend .column-container-layout;
        padding: 15px;
        justify-content: flex-start;
        .segment-container {
            @extend .row-container-layout;
            border-radius: 30px;
            height: 36px;
            background-color: white;
            margin-bottom: 5px;
            .segment-item-container {
                @extend .row-container-layout;
                border-radius: 30px;
                padding: 10px 0;
                flex: 1;
                span {
                    font-size: 14px;
                    width: 100%;
                    text-align: center;
                }
            }
            .segment-item-normal {
                background-color: white;
                span {
                    color: #333333;
                }
            }
            .segment-item-selected {
                background-color: #f37741;
                span {
                    color: white;
                }
            }
        }
    }
}
</style>
